<template>
  <div class="page bgc-fff">
    <x-header title="运抵确认"></x-header>
    <panel header="装车照片" align="left" style="margin-top: 0.46rem;"></panel>
    <flexbox class="pad-t20 pad-b20">
      <flexbox-item>
        <v-upload-img
          class="depart-upload-img"
          @upload-img-start='uploadImgStart'
          @upload-img-end='uploadImgEnd'
          :upload-post-data="postData"
          :upload-watermark-data="watermarkData"
          :upload-img-obj="uploadImgData[0]"></v-upload-img>
        <div class="upload-item-title">{{uploadImgData[0].title}}</div>
      </flexbox-item>
      <flexbox-item>
        <v-upload-img
          class="depart-upload-img"
          @upload-img-start='uploadImgStart'
          @upload-img-end='uploadImgEnd'
          :upload-post-data="postData"
          :upload-watermark-data="watermarkData"
          :upload-img-obj="uploadImgData[1]"></v-upload-img>
        <div class="upload-item-title">{{uploadImgData[1].title}}</div>
      </flexbox-item>
    </flexbox>
    <!--示例图片-->
    <cell
      title="照片示例说明"
      is-link
      class="ta-c bor-bottom pad-t-b15"
      :border-intent="false"
      :arrow-direction="showContent ? 'up' : 'down'"
      @click.native="showContent = !showContent"></cell>
    <div v-if="showContent" class="pad15 bgc-f4f4f4">
      <div class="pad-b15" v-for="(item,index) in uploadImgDesData" :key="index">
        <span class="ta-c f14 c-666 pad-t-b10">{{item.title}}</span>
        <img :src="item.attachDemoImgSrc" class="depart-des-img" alt="">
      </div>
      <div class="pad-t-b15 f14  pad-l-r15 bgc-fff br-8 ta-l c-333">
        45°角拍摄必须看清板车车牌号、板车内所装载的商品车辆，商品车辆必须清晰的看到每一台车辆的具体轮廓
      </div>
    </div>
    <!-- button -->
    <div class="pad-l-r15 pad-t30">
      <p class="large-btn" :disabled="subBtnDisabled"
         :class="[{'bgc-01a4f6':!subBtnDisabled}]"
         @click="subButton">运抵确认</p>
    </div>
    <!-- loading -->
    <v-loading  v-show="loadingShow"></v-loading>
  </div>
</template>

<script type="text/ecmascript-6">
  import { XHeader, Flexbox, FlexboxItem, Panel, Cell } from 'vux'
  import { Toast } from 'mint-ui'
  import Loading from '@/components/common/loading/loading'
  import * as ThreeStorage from '@/utils/store/token.js'
  import UploadImg from '@/components/common/uploadImg/upload_type_one'
  import { getToken } from '@/api/qiniu'
  import * as QiniuApi from '@/api/qiniu'
  import * as WaybillApi from '@/api/waybill'
  import Utils from '@/utils/util'
  import * as SessionS from '@/utils/store/storage'
  const QINIU_API = process.env.QINIU_API
  export default {
    name: 'shipOrder-shipToReport',
    data() {
      return {
        driver_Id: '',
        postData: {
          token: '',
          imageUrl: QINIU_API,
          key: ''
        },
        subBtnDisabled: true,
        uploadImgData: [
          {
            fileMark: 'departAttach',
            title: '车头45度照片',
            licenseTypeId: '20',
            attachTypeId: '01',
            attachDemoImgSrc: require('@/assets/image/v1/upload_examples/depart/car_start_45.png'),
            attachImgSrc: ''
          },
          {
            fileMark: 'reverseDepartAttach',
            title: '车尾45度照片',
            licenseTypeId: '20',
            attachTypeId: '02',
            attachDemoImgSrc: require('@/assets/image/v1/upload_examples/depart/car_end_45.png'),
            attachImgSrc: ''
          }
        ],
        uploadImgDesData: [
          {
            title: '装车照片一',
            attachDemoImgSrc: require('@/assets/image/v1/upload_examples/depart/car_start_45_des.jpeg')
          },
          {
            title: '装车照片二',
            attachDemoImgSrc: require('@/assets/image/v1/upload_examples/depart/car_end_45_des.jpeg')
          }
        ],
        watermarkData: [], // 水印数组
        location: '',
        spCode: '', // 整个装车单code
        stCode: '', // 单个运输任务code
        spId: '', // 整个装车单id
        isHaveUploadAttach: {
          departAttach: '',
          reverseDepartAttach: ''
        },
        showContent: false,
        loadingShow: false // loading显隐
      }
    },
    components: {
      XHeader, Flexbox, FlexboxItem, Panel, Cell,
      'v-upload-img': UploadImg,
      'v-loading': Loading
    },
    created() {
      const { spCode, stCode, spId } = SessionS.getSession('departData')
      this.spCode = spCode
      this.stCode = stCode
      this.spId = spId
      this.location = SessionS.getSession('nowPlaceData')
      this.driver_Id = ThreeStorage.getDriverId()
      this.initWaterMarkFunc()
      this.getQiniuToken()
    },
    mounted() {
    },
    methods: {
      initWaterMarkFunc: function() {
        const nowDateDay = Date.parse(new Date()) // 获取目前时间戳
        const nowDateDayVal = Utils.formatTime(nowDateDay, 'Y-M-D')
        const nowDateHoursVal = Utils.formatTime(nowDateDay, 'h:m')
        const nowDateWeekVal = Utils.currentWeek() // 今天星期几
        const nowLocationVal = this.location.Address
        this.watermarkData = [
          {
            font: '20px 黑体',
            fillStyle: '#fff',
            fillText: nowDateDayVal + ' ' + nowDateWeekVal + ' ' + nowLocationVal, // 2018-07-06 星期五 江西省xxxxx
            position: {
              horizontal: 'center', // 水平方向居 (left,right,center)
              horizontalMargin: '0', // 水平方向居 margin
              vertical: 'bottom', // 垂直方向居 (top,bottom,middle)
              verticalMargin: '20' // 垂直方向居 margin
            }
          },
          {
            font: '40px 黑体',
            fillStyle: '#fff',
            fillText: nowDateHoursVal, // 17:51 时间
            position: {
              horizontal: 'center', // 水平方向居 (left,right,center)
              horizontalMargin: '0', // 水平方向居 margin
              vertical: 'bottom', // 垂直方向居 (top,bottom,middle)
              verticalMargin: '46' // 垂直方向居 margin
            }
          }
        ]
      },
      // 七牛token
      getQiniuToken: function() {
        const that = this
        getToken().then(res => {
          if (res.code === 0) {
            that.postData.token = res.data
          }
        }).catch(res => {
          console.warn('error', res)
        })
      },
      // 图片开始上传
      uploadImgStart: function() {
        this.loadingShow = true
      },
      // 子组件-上传图片后-通知父组件
      uploadImgEnd: function(qiniuResData) {
        const that = this
        if (qiniuResData.status) {
          that.subBtnDisabled = false
          that.updateFileDataFunc(qiniuResData)
        } else {
          that.loadingShow = false
          Toast({
            message: '图片上传失败',
            duration: 1000
          })
        }
      },
      // 运抵确认图片附件存储
      updateFileDataFunc: function(qiniuResData) {
        const that = this
        const fileInfo = qiniuResData
        console.log('updateFileDataFunc', qiniuResData.uploadImgObj)
        const toParams = {
          attachKey: fileInfo.hash,
          attachName: fileInfo.imgName,
          attachType: fileInfo.uploadImgObj.attachTypeId,
          purpose: fileInfo.uploadImgObj.licenseTypeId,
          shipTaskCode: that.stCode,
          shipmentCode: that.spCode
        }
        QiniuApi.updateShipmentAttach(toParams).then(res => {
          this.loadingShow = false
          if (res.code === 0) {
            Toast({
              message: '图片上传成功',
              duration: 1000
            })
            this.isHaveUploadAttach[fileInfo.uploadImgObj.fileMark] = fileInfo.uploadImgObj.fileMark
          }
        }).catch(res => {
          this.loadingShow = false
          console.warn('error', res)
        })
      },
      // 发车确认提交
      subButton: function() {
        // console.log('departData', SessionS.getSession('departData'))
        // console.log('nowPlaceData', SessionS.getSession('nowPlaceData'))
        const { spId, spCode, stCode } = SessionS.getSession('departData')
        const { province, city, Address, lon, lat } = SessionS.getSession('nowPlaceData')
        const toParams = {
          shipmentId: spId, // 装车单 id
          shipmentCode: spCode, // 装车运单内 装车单code
          shipTaskCode: stCode, // 装车运单内-运输任务taskCode
          province: province, // 省份
          city: city, // 市
          location: Address, // 详细地址
          dcx: lon, // 经度
          dcy: lat // 纬度
        }
        const check_req = this.checkDepartAttach(this.isHaveUploadAttach)
        if (check_req) {
          this.loadingShow = true
          if (!this.loadingShow) { return } // 防止重复提交
          WaybillApi.getShipToByLicense(toParams).then(res => {
            this.loadingShow = false
            if (res.code === 0) {
              Toast({
                message: '运抵确认成功',
                duration: 1000
              })
              setTimeout(() => {
                this.$router.push({ name: 'shipOrder-driverDetail' })
              }, 1000)
            }
          }).catch(res => {
            this.loadingShow = false
            console.warn('error', res)
          })
        }
      },
      // 发车确认前检查图片是否都有上传
      checkDepartAttach: function(data) {
        const { departAttach, reverseDepartAttach } = data
        const departAttach_res = Utils.isLegalObject(departAttach)
        if (!departAttach_res) {
          Toast({
            message: '请先上传车头45度照片！',
            duration: 1000
          })
          return
        }
        const reverseDepartAttach_res = Utils.isLegalObject(reverseDepartAttach)
        if (!reverseDepartAttach_res) {
          Toast({
            message: '请先上传车尾45度照片！',
            duration: 1000
          })
          return
        }
        return true
      }
    }
  }
</script>

<style scoped>
  @import '../../styles/util.css';
  .page{
    overflow-y: auto;
  }
  .large-btn{
    background-color: #dedede;
  }
  .large-btn.bgc-01a4f6{
    background-color: #01a4f6;
  }
  .depart-upload-img{
    width: 1.6rem;
    height: 1.05rem;
    margin: 0 auto;
  }

  .upload-item-title{
    text-align: center;
    font-size: .12rem;
    /* color: #666; */
    color: #999;
    margin-top: .05rem;
  }
  .depart-des-img{
    width:100%;
    height: auto;
  }
  /*禁止vux-ui原样式*/
  /*.weui-cell:before{*/
  /*height: 0;*/
  /*border-top: none;*/
  /*}*/
  .vux-tap-active:active {
    /*background-color: #ECECEC;*/
    background-color: #fff;
  }
  .weui-cell.pad-t-b15{
    padding-bottom: .15rem;
    padding-top: .15rem;
  }
</style>
